<script>
export default {
  name: 'open-header',
  data() {
    return {
      showChange: false,
      list: [],
    }
  },
  created() {
    this.getData()
  },

  methods: {
    getData() {
      this.$http.get('/exKaibiao/exSection/listAll', { params: { projectId: this.$route.query.projectId } }).then(r => {
        this.list = r.result
      })
    },
    selectItem(item) {
      this.changeShow()
      this.$router.push({
        path: this.$route.path,
        query: { ...this.$route.query, bidSectionName: item.bidSectionName, bidSectionId: item.bidSectionId },
      })
    },
    changeShow() {
      this.showChange = !this.showChange
    },
  },
}
</script>

<template>
  <div class="">
    <div class="box_2 flex-row">
      <span class="text_1">不见面开标大厅</span>
      <div class="group_3 flex-row">
        <div class="text-wrapper_1" v-show="!$route.path.includes('open-index')">
          <span
            class="text_2"
            :class="{ active: $route.path.includes('open-unpwd') }"
            @click="$router.push({ path: 'open-unpwd', query: $route.query })"
            >解密环节</span
          ><!--<span class="text_2" @click="$router.push('open-unpwd')">展示抽取</span
          >--><span
            class="text_2"
            :class="{ active: $route.path.includes('open-record') }"
            @click="$router.push({ path: 'open-record', query: $route.query })"
            >开标记录</span
          ><span
            class="text_2"
            :class="{ active: $route.path.includes('open-end') }"
            @click="$router.push({ path: 'open-end', query: $route.query })"
            >开标结束</span
          >
        </div>
      </div>
      <div class="text-wrapper_2 flex-col justify-center">
        <span class="text_6">项目名称：{{ $route.query.projectName || '' }}</span>
        <span v-if="!$route.path.includes('open-index')" class="text_7"
          >当前标段：{{ $route.query.bidSectionName }}</span
        >
      </div>
      <div
        v-show="!$route.path.includes('open-index')"
        class="text-wrapper_3 flex-col"
        @click="
          $router.push({
            path: '/open-hall/open-index',
            query: { projectId: $route.query.projectId, projectName: $route.query.projectName },
          })
        "
      >
        <span class="text_8">返回开标大厅</span>
      </div>
    </div>
    <div class="box_15 flex-col" v-show="showChange">
      <div
        v-for="item in list"
        class="flex-col"
        :class="[item.kaibiaoStatus ? 'text-wrapper_29' : 'text-wrapper_28']"
        @click="selectItem(item)"
      >
        <span class="text_50">{{ item.bidSectionName }}</span>
        <span class="paragraph_2"
          >开标时间:&nbsp;&nbsp;{{ item.kaibiaoDate }}<br />标段描述:&nbsp;&nbsp;{{ item.bidSectionContent }}</span
        >
      </div>
      <!--      <div class="text-wrapper_28 flex-col">
        <span class="text_50">第一标段</span>
        <span class="paragraph_2"
          >开标时间:&nbsp;&nbsp;2024/12/05&nbsp;&nbsp;&nbsp;09:30<br />标段描述:&nbsp;&nbsp;樟市镇人民政府2024年建设xxxx发展项目</span
        >
      </div>-->
    </div>
  </div>
</template>

<style scoped lang="less">
.box_2 {
  background-color: rgba(3, 37, 146, 1);
  width: 100vw;
  height: 4.17vw;
  .text_1 {
    width: 10.58vw;
    height: 1.57vw;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 1.61vw;
    font-family: AlimamaShuHeiTi-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 1.62vw;
    margin: 1.3vw 0 0 3.17vw;
  }
  .group_3 {
    position: relative;
    width: 25.68vw;
    height: 4.17vw;
    margin-left: 11.15vw;
    .section_1 {
      background-color: rgba(255, 207, 14, 1);
      width: 8.73vw;
      height: 4.17vw;
      margin-left: 13.75vw;
    }
    .text-wrapper_1 {
      cursor: pointer;
      width: 25.68vw;
      height: 4.05vw;
      display: flex;
      align-items: center;
      overflow-wrap: break-word;
      font-size: 0;
      font-family: AlibabaPuHuiTi-Regular;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 1.05vw;
      .text_2 {
        &.active {
          background-color: rgba(255, 207, 14, 1);
          height: 100%;
          display: flex;
          color: rgba(3, 37, 146, 1);
          font-weight: 700;
          align-items: center;
          padding: 0 3vw;
        }
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 1.04vw;
        font-family: AlibabaPuHuiTi-Regular;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 1.05vw;
        margin-left: 3vw;
      }
    }
  }
  .text-wrapper_2 {
    width: 18.29vw;
    height: 2.24vw;
    margin: 0.93vw 0 0 21.71vw;
    .text_6 {
      width: 18.29vw;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 溢出部分用省略号表示 */

      height: 0.84vw;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 0.83vw;
      font-family: AlibabaPuHuiTi-Regular;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 0.84vw;
    }
    .text_7 {
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 溢出部分用省略号表示 */
      width: 18vw;
      height: 0.84vw;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 0.83vw;
      font-family: AlibabaPuHuiTi-Regular;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 0.84vw;
      margin-top: 0.58vw;
    }
  }
  .text-wrapper_3 {
    cursor: pointer;
    background-color: rgba(255, 207, 14, 1);
    height: 2.09vw;
    width: 6.33vw;
    margin: 1.04vw 3.9vw 0 1.19vw;
    .text_8 {
      width: 3.08vw;
      height: 0.79vw;
      overflow-wrap: break-word;
      color: rgba(3, 37, 146, 1);
      font-size: 0.83vw;
      font-family: AlibabaPuHuiTi-Regular;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 0.84vw;
      margin: 0.62vw 0 0 0.62vw;
    }
  }
}
.box_15 {
  position: absolute;
  left: 72.35vw;
  top: 3.7vw;
  width: 23.75vw;
  z-index: 9;
  background: url(../../../assets/ps6bgutox60xvffqkoo9zuhll4cjv1sqcr087a88ab-5576-4ed2-b740-9ebb43250fb3.png) 100%
    no-repeat;
  background-size: 100% 100%;
  .text-wrapper_28 {
    background-color: rgba(255, 207, 14, 1);
    border-radius: 6px;
    width: 21.25vw;
    height: 5.9vw;
    margin: 1vw 0 1vw 1.25vw;
    .text_50 {
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 溢出部分用省略号表示 */
      width: 19.39vw;
      height: 0.89vw;
      overflow-wrap: break-word;
      color: rgba(3, 37, 146, 1);
      font-size: 0.93vw;
      font-family: AlibabaPuHuiTi-Bold;
      font-weight: 700;
      text-align: left;
      white-space: nowrap;
      line-height: 0.94vw;
      margin: 0.72vw 0 0 1.56vw;
    }
    .paragraph_2 {
      width: 18.18vw;
      height: 1.83vw;
      overflow-wrap: break-word;
      color: rgba(3, 37, 146, 1);
      font-size: 0.83vw;
      font-family: AlibabaPuHuiTi-Regular;
      font-weight: normal;
      text-align: left;
      line-height: 1.05vw;
      margin: 0.46vw 0 0.98vw 1.51vw;
    }
  }
  .text-wrapper_29 {
    background-color: rgba(236, 236, 236, 1);
    border-radius: 6px;
    width: 21.25vw;
    height: 5.9vw;
    margin: 0.88vw 0 1vw 1.25vw;
    .text_50 {
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 溢出部分用省略号表示 */
      width: 19.39vw;
      height: 0.89vw;
      overflow-wrap: break-word;
      color: rgba(51, 51, 51, 1);
      font-size: 0.93vw;
      font-family: AlibabaPuHuiTi-Bold;
      font-weight: 700;
      text-align: left;
      white-space: nowrap;
      line-height: 0.94vw;
      margin: 0.72vw 0 0 1.56vw;
    }
    .paragraph_2 {
      width: 18.18vw;
      height: 1.83vw;
      overflow-wrap: break-word;
      color: rgba(51, 51, 51, 1);
      font-size: 0.83vw;
      font-family: AlibabaPuHuiTi-Regular;
      font-weight: normal;
      text-align: left;
      line-height: 1.05vw;
      margin: 0.46vw 0 0.98vw 1.51vw;
    }
  }
}
</style>
